<template>
  <view
    class="title"
    :style="[customStyle]">
      <view>{{ title }}</view>
      <slot name="left"></slot>
      <slot></slot>
    </view>
</template>

<script>
export default {
  name: 'Title',
  props: {
    title: {
      type: String,
      default: ''
    },
    customStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .title{
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
    padding-left: 24rpx;
    position: relative;
    display: flex;
    align-items: center;

    &::after{
      content: '';
      display: block;
      width: 8rpx;
      background: -webkit-linear-gradient(top, #56d39d 0, $uni-color-primary 100%);
      position: absolute;
      left: 0;
      top: 6rpx;
      bottom: 6rpx;
      margin: auto;
      max-height: 30rpx;
      border-radius: 2rpx;
    }
  }
</style>
